<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中医体质评估与健康管理平台</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 引入 Three.js (用于3D舌象展示) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8E44AD', // 中医紫色主题
                        secondary: '#D35400', // 中医橙色辅助色
                        accent: '#27AE60', // 健康绿色
                        neutral: '#2C3E50', // 中性深灰
                        light: '#F8F9FA', // 浅色背景
                    },
                    fontFamily: {
                        sans: ['Noto Sans SC', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elegant': '0 10px 25px -5px rgba(142, 68, 173, 0.1), 0 8px 10px -6px rgba(142, 68, 173, 0.1)',
                        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                    },
                    backgroundImage: {
                        'pattern': "url('')"
                    }
                }
            }
        }
    </script>
    <script src="ai-assistant.js"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .scrollbar-hide {
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .glassmorphism {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
        }
    </style>
</head>
<body class="bg-light bg-pattern min-h-screen">
    <!-- 顶部导航 -->
    <header class="fixed w-full z-50 transition-all duration-300" id="navbar">
        <nav class="glassmorphism border-b border-gray-200/50 px-4 py-3">
            <div class="container mx-auto flex justify-between items-center">
                <div class="flex items-center">
                    <div class="w-10 h-10 rounded-full bg-primary/90 flex items-center justify-center text-white mr-3">
                        <i class="fa fa-heartbeat text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold text-primary">中医体质评估平台</h1>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="#overview" class="text-neutral hover:text-primary transition-colors font-medium">概述</a>
                    <a href="#features" class="text-neutral hover:text-primary transition-colors font-medium">功能特性</a>
                    <a href="#architecture" class="text-neutral hover:text-primary transition-colors font-medium">系统架构</a>
                    <a href="#demo" class="text-neutral hover:text-primary transition-colors font-medium">系统演示</a>
                    <a href="#contact" class="text-neutral hover:text-primary transition-colors font-medium">联系我们</a>
                </div>
                <div class="flex space-x-4">
                    <a id="login-btn" href="#login" class="hidden md:block px-4 py-2 rounded-full bg-primary/10 text-primary font-medium hover:bg-primary/20 transition-colors">登录</a>
<a id="register-btn" href="#register" class="px-4 py-2 rounded-full bg-primary text-white font-medium hover:bg-primary/90 transition-colors">注册</a>
                    <button class="md:hidden text-neutral" id="mobile-menu-button">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </nav>
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden glassmorphism absolute w-full" id="mobile-menu">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="#overview" class="text-neutral hover:text-primary transition-colors font-medium py-2 border-b border-gray-200/50">概述</a>
                <a href="#features" class="text-neutral hover:text-primary transition-colors font-medium py-2 border-b border-gray-200/50">功能特性</a>
                <a href="#architecture" class="text-neutral hover:text-primary transition-colors font-medium py-2 border-b border-gray-200/50">系统架构</a>
                <a href="#demo" class="text-neutral hover:text-primary transition-colors font-medium py-2 border-b border-gray-200/50">系统演示</a>
                <a href="#contact" class="text-neutral hover:text-primary transition-colors font-medium py-2">联系我们</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="pt-32 pb-20 px-4 md:px-8 bg-gradient-to-br from-primary/90 to-primary text-white">
        <div class="container mx-auto max-w-7xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-4 text-shadow">
                        基于多模态人工智能的<br>中医体质评估与健康管理平台
                    </h2>
                    <p class="text-lg md:text-xl opacity-90 mb-8 max-w-xl">
                        融合舌象、脉象、问卷与基因/代谢数据，提供客观、可解释的体质辨识与个性化调理服务
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#demo" class="px-6 py-3 bg-white text-primary rounded-full font-bold hover:bg-gray-100 transition-colors shadow-lg">
                            立即体验
                        </a>
                        <a href="#features" class="px-6 py-3 border-2 border-white/50 text-white rounded-full font-bold hover:bg-white/10 transition-colors">
                            了解更多
                        </a>
                    </div>
                    <div class="flex items-center mt-10 space-x-6">
                        <div class="flex -space-x-2">
                            <img src="https://picsum.photos/id/1027/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/id/1005/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/id/1012/100" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <div class="w-10 h-10 rounded-full bg-white/20 border-2 border-white flex items-center justify-center text-sm font-medium">
                                500+
                            </div>
                        </div>
                        <div>
                            <div class="flex items-center">
                                <i class="fa fa-star text-yellow-300"></i>
                                <i class="fa fa-star text-yellow-300"></i>
                                <i class="fa fa-star text-yellow-300"></i>
                                <i class="fa fa-star text-yellow-300"></i>
                                <i class="fa fa-star-half-o text-yellow-300"></i>
                                <span class="ml-2 text-sm opacity-90">4.8/5</span>
                            </div>
                            <p class="text-sm opacity-80">来自500+位专业医师的评价</p>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2 relative">
                    <div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl hover-scale">
                        <img src="https://picsum.photos/id/175/800/600" alt="中医体质评估系统界面" class="w-full h-auto">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                            <div class="p-6">
                                <h3 class="text-white text-xl font-bold mb-2">实时体质评估演示</h3>
                                <p class="text-white/80">体质评估准确率达91.5%</p>
                            </div>
                        </div>
                    </div>
                    <!-- 装饰元素 -->
                    <div class="absolute -top-6 -right-6 w-32 h-32 bg-secondary/20 rounded-full blur-2xl"></div>
                    <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-accent/20 rounded-full blur-3xl"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目概述 -->
    <section id="overview" class="py-20 px-4 md:px-8">
        <div class="container mx-auto max-w-7xl">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-neutral mb-4">项目概述</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    我们的平台致力于将传统中医智慧与现代人工智能技术相结合，提供科学、精准的体质评估和个性化健康管理服务
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div class="order-2 md:order-1">
                    <h3 class="text-2xl font-bold text-neutral mb-4">云-边-端协同架构</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1">
                                <i class="fa fa-microchip"></i>
                            </div>
                            <div>
                                <h4 class="text-xl font-semibold text-neutral mb-1">硬件层</h4>
                                <p class="text-gray-600">配备舌象高清摄像头、光电脉象手环、结构化问卷及基因/代谢报告上传接口</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1">
                                <i class="fa fa-mobile-phone"></i>
                            </div>
                            <div>
                                <h4 class="text-xl font-semibold text-neutral mb-1">边缘层</h4>
                                <p class="text-gray-600">在手机或本地网关上完成舌象、脉象的轻量化特征提取并进行AES-256本地加密，实现实时预警</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1">
                                <i class="fa fa-cloud"></i>
                            </div>
                            <div>
                                <h4 class="text-xl font-semibold text-neutral mb-1">云端</h4>
                                <p class="text-gray-600">部署多模态融合模型（TabNet + CNN/ViT + 时序Transformer → Transformer-Fusion），输出八大体质的概率分布</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="order-1 md:order-2 flex justify-center">
                    <div class="relative">
                        <div class="bg-white rounded-2xl shadow-elegant p-6 hover-scale">
                            <div id="architecture-diagram" class="h-96 relative">
                                <!-- 云-边-端架构图 -->
                                <div class="absolute top-5 left-1/2 transform -translate-x-1/2 w-64 h-24 bg-blue-100 rounded-xl flex items-center justify-center border-2 border-blue-200">
                                    <div class="text-center">
                                        <i class="fa fa-cloud text-blue-500 text-3xl mb-2"></i>
                                        <p class="font-bold text-blue-700">云端智能</p>
                                        <p class="text-xs text-blue-600">多模态融合模型</p>
                                    </div>
                                </div>
                                
                                <div class="absolute top-40 left-1/2 transform -translate-x-1/2 w-64 h-24 bg-green-100 rounded-xl flex items-center justify-center border-2 border-green-200">
                                    <div class="text-center">
                                        <i class="fa fa-mobile-phone text-green-500 text-3xl mb-2"></i>
                                        <p class="font-bold text-green-700">边缘计算</p>
                                        <p class="text-xs text-green-600">特征提取与本地加密</p>
                                    </div>
                                </div>
                                
                                <div class="absolute bottom-5 left-1/2 transform -translate-x-1/2 w-64 h-24 bg-orange-100 rounded-xl flex items-center justify-center border-2 border-orange-200">
                                    <div class="text-center">
                                        <i class="fa fa-microchip text-orange-500 text-3xl mb-2"></i>
                                        <p class="font-bold text-orange-700">硬件采集层</p>
                                        <p class="text-xs text-orange-600">舌象、脉象、问卷数据</p>
                                    </div>
                                </div>
                                
                                <!-- 连接线 -->
                                <div class="absolute top-29 left-1/2 w-1 h-11 bg-gray-300"></div>
                                <div class="absolute bottom-29 left-1/2 w-1 h-11 bg-gray-300"></div>
                                <div class="absolute top-29 left-[calc(50%-10px)] w-20 h-1 bg-gray-300 rotate-45 transform-origin: left center"></div>
                                <div class="absolute top-29 left-[calc(50%+10px)] w-20 h-1 bg-gray-300 -rotate-45 transform-origin: right center"></div>
                                <div class="absolute bottom-29 left-[calc(50%-10px)] w-20 h-1 bg-gray-300 -rotate-45 transform-origin: left center"></div>
                                <div class="absolute bottom-29 left-[calc(50%+10px)] w-20 h-1 bg-gray-300 rotate-45 transform-origin: right center"></div>
                            </div>
                        </div>
                        <!-- 装饰元素 -->
                        <div class="absolute -z-10 top-5 left-5 w-full h-full bg-primary/10 rounded-2xl"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能特性 -->
    <section id="features" class="py-20 px-4 md:px-8 bg-gray-50">
        <div class="container mx-auto max-w-7xl">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-neutral mb-4">功能与特性</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    我们的平台通过多模态数据采集和AI分析，提供全面的体质评估和个性化健康管理服务
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能卡片1 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-area-chart text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral mb-3">多模态体质评估</h3>
                    <p class="text-gray-600 mb-4">\                        通过问卷、舌象、脉象、基因/代谢四类数据的同步采集，实现中医体质的全景化评估
                    </p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>八大体质概率分布输出</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>评估准确率不低于92%</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>符合《中医舌诊信息采集技术规范》</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 功能卡片2 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-book text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral mb-3">个性化调理方案</h3>
                    <p class="text-gray-600 mb-4">\                        基于中医体质-方剂-食材三层知识图谱，结合TCM-GPT大语言模型生成个性化调理方案
                    </p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>饮食、运动、药膳、情志四大模块</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>方案生成时延280ms</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>每条建议标注出处，实现可解释性</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 功能卡片3 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-line-chart text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral mb-3">周期性健康监测</h3>
                    <p class="text-gray-600 mb-4">\                        系统支持周期性复评（7天/30天），通过雷达图、趋势折线图直观展示体质变化
                    </p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>体质雷达图与代谢趋势图</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>体质恶化或关键指标异常预警</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>支持PDF/HTML报告导出</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 功能卡片4 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-user-md text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral mb-3">医师协作平台</h3>
                    <p class="text-gray-600 mb-4">\                        医师可通过后台系统获取体质概率图、关键特征解释及系统自动预警，作为辨证论治的客观依据
                    </p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>一键共享报告功能</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>远程会诊支持</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>跨机构专家协作</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 功能卡片5 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-users text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral mb-3">患者健康管理</h3>
                    <p class="text-gray-600 mb-4">\                        用户在移动端完成问卷、舌象拍照、佩戴手环并上传基因/代谢报告，获取个性化健康方案
                    </p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>每日打卡与积分激励</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>1-2分钟内快速评估</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>调理卡片可视化展示</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 功能卡片6 -->
                <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                    <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-6">
                        <i class="fa fa-lock text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-neutral mb-3">数据安全与合规</h3>
                    <p class="text-gray-600 mb-4">\                        全链路采用AES-256本地加密、TLS 1.3传输，确保用户数据安全与隐私保护
                    </p>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>符合《个人信息保护法》</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>遵循《医疗器械网络安全要求》</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-check text-accent mr-2"></i>
                            <span>端到端加密传输</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 系统架构 -->
    <section id="architecture" class="py-20 px-4 md:px-8">
        <div class="container mx-auto max-w-7xl">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-neutral mb-4">系统架构与技术实现</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    我们的平台采用先进的AI技术和云边端协同架构，确保评估的准确性和系统的高效运行
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
                <!-- 左侧内容 -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-xl shadow-elegant p-6 h-full">
                        <h3 class="text-2xl font-bold text-neutral mb-6">技术栈与模型架构</h3>
                        
                        <div class="mb-8">
                            <h4 class="text-lg font-semibold text-primary mb-3">采集层</h4>
                            <p class="text-gray-600 mb-4">遵循WS/T 627-2018 标准，通过多光谱舌象采集模块与压电脉象传感器获取数据</p>
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>多光谱舌象采集</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>压电脉象传感器</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>结构化问卷系统</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>基因/代谢报告接口</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="mb-8">
                            <h4 class="text-lg font-semibold text-primary mb-3">模型层</h4>
                            <p class="text-gray-600 mb-4">采用多模态AI模型，结合传统中医理论实现精准体质辨识</p>
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>TabNet 处理问卷结构化数据</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>CNN/ViT 提取舌象特征</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>时序Transformer捕捉脉象波形</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>注意力机制融合多模态特征</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold text-primary mb-3">应用层</h4>
                            <p class="text-gray-600 mb-4">基于王琦九种体质量表分类，调用TCM-GPT生成个性化方案</p>
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>王琦九种体质量表分类</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>TCM-GPT 方案生成</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>体质-方剂-食材知识图谱</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>符合《中医体质学》理论</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧图表与演示 -->
                <div class="lg:col-span-3">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 体质概率分布图表 -->
                        <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                            <h3 class="text-xl font-bold text-neutral mb-4">体质概率分布</h3>
                            <div class="h-64">
                                <canvas id="constitutionChart"></canvas>
                            </div>
                        </div>
                        
                        <!-- 系统流程 -->
                        <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                            <h3 class="text-xl font-bold text-neutral mb-4">系统工作流程</h3>
                            <div class="relative h-64">
                                <div class="absolute top-0 left-0 w-full h-full">
                                    <!-- 流程图 -->
                                    <div class="flex flex-col justify-between h-full">
                                        <div class="bg-blue-100 rounded-lg p-3 text-center">
                                            <p class="font-medium text-blue-700">数据采集</p>
                                        </div>
                                        <div class="flex justify-center">
                                            <i class="fa fa-arrow-down text-gray-400"></i>
                                        </div>
                                        <div class="bg-green-100 rounded-lg p-3 text-center">
                                            <p class="font-medium text-green-700">特征提取</p>
                                        </div>
                                        <div class="flex justify-center">
                                            <i class="fa fa-arrow-down text-gray-400"></i>
                                        </div>
                                        <div class="bg-purple-100 rounded-lg p-3 text-center">
                                            <p class="font-medium text-purple-700">模型推理</p>
                                        </div>
                                        <div class="flex justify-center">
                                            <i class="fa fa-arrow-down text-gray-400"></i>
                                        </div>
                                        <div class="bg-orange-100 rounded-lg p-3 text-center">
                                            <p class="font-medium text-orange-700">方案生成</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 舌象分析演示 -->
                        <div class="bg-white rounded-xl shadow-card p-6 hover-scale md:col-span-2">
                            <h3 class="text-xl font-bold text-neutral mb-4">舌象分析演示</h3>
                            <div class="flex flex-col md:flex-row gap-6">
                                <div class="md:w-1/2">
                                    <div class="aspect-square rounded-lg overflow-hidden border-2 border-gray-200">
                                        <img id="tongueImage" src="https://picsum.photos/id/237/400/400" alt="舌象示例" class="w-full h-full object-cover">
                                    </div>
                                    <div class="mt-4 flex justify-center space-x-2">
                                        <button class="px-3 py-1 bg-primary text-white rounded hover:bg-primary/90 transition-colors" onclick="changeTongueImage(1)">
                                            舌色淡白
                                        </button>
                                        <button class="px-3 py-1 bg-primary text-white rounded hover:bg-primary/90 transition-colors" onclick="changeTongueImage(2)">
                                            舌红苔黄
                                        </button>
                                        <button class="px-3 py-1 bg-primary text-white rounded hover:bg-primary/90 transition-colors" onclick="changeTongueImage(3)">
                                            舌淡胖嫩
                                        </button>
                                    </div>
                                </div>
                                <div class="md:w-1/2">
                                    <div class="bg-gray-50 p-4 rounded-lg h-full">
                                        <h4 class="text-lg font-semibold text-primary mb-3">舌象分析结果</h4>
                                        <div id="tongueAnalysis">
                                            <ul class="space-y-3 text-gray-700">
                                                <li class="flex items-start">
                                                    <span class="font-medium min-w-[80px]">舌色：</span>
                                                    <span>淡白</span>
                                                </li>
                                                <li class="flex items-start">
                                                    <span class="font-medium min-w-[80px]">舌形：</span>
                                                    <span>胖大，边有齿痕</span>
                                                </li>
                                                <li class="flex items-start">
                                                    <span class="font-medium min-w-[80px]">舌苔：</span>
                                                    <span>白腻</span>
                                                </li>
                                                <li class="flex items-start">
                                                    <span class="font-medium min-w-[80px]">主证：</span>
                                                    <span>脾虚湿盛</span>
                                                </li>
                                                <li class="flex items-start">
                                                    <span class="font-medium min-w-[80px]">建议：</span>
                                                    <span>健脾利湿，可食用山药、薏米、赤小豆等</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 系统演示 -->
    <section id="demo" class="py-20 px-4 md:px-8 bg-gray-50">
        <div class="container mx-auto max-w-7xl">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-neutral mb-4">系统演示</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    体验我们的中医体质评估平台，感受AI技术与传统中医的完美结合
                </p>
            </div>
            
            <div class="bg-white rounded-2xl shadow-elegant overflow-hidden">
                <!-- 演示标签页 -->
                <div class="border-b border-gray-200">
                    <div class="flex overflow-x-auto scrollbar-hide">
                        <button class="px-6 py-4 font-medium text-purple-700 border-b-2 border-purple-700 demo-tab-button" onclick="switchDemoTab('patient-demo', event)">
                            患者端演示
                        </button>
                        <button class="px-6 py-4 font-medium text-gray-500 hover:text-purple-700 transition-colors demo-tab-button" onclick="switchDemoTab('doctor-demo', event)">
                            医师端演示
                        </button>
                        <button class="px-6 py-4 font-medium text-gray-500 hover:text-purple-700 transition-colors demo-tab-button" onclick="switchDemoTab('assessment-process', event)">
                            评估流程
                        </button>
                    </div>
                </div>
                
                <!-- 演示内容 -->
                <div class="p-6">
                    <!-- 患者端演示 -->
                    <div id="patient-demo" class="demo-tab-content">
                        <h3 class="text-2xl font-bold text-neutral mb-6">患者体验流程</h3>
                        <p class="text-gray-600 mb-8">用户可以通过移动端应用完成体质评估和健康管理，整个过程简单便捷，只需1-2分钟即可获得专业的体质分析结果</p>
                        
                        <!-- 体验流程 -->
                        <div class="grid grid-cols-1 lg:grid-cols-5 gap-4 mb-10">
                            <div class="bg-white rounded-xl shadow-card p-6 text-center">
                                <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mx-auto mb-4">1</div>
                                <h4 class="text-lg font-semibold text-neutral mb-2">注册与登录</h4>
                                <p class="text-gray-600 text-sm">通过手机号快速注册账号，设置个人基本信息</p>
                            </div>
                            <div class="bg-white rounded-xl shadow-card p-6 text-center">
                                <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mx-auto mb-4">2</div>
                                <h4 class="text-lg font-semibold text-neutral mb-2">数据采集</h4>
                                <p class="text-gray-600 text-sm">完成结构化问卷、拍摄舌象照片、佩戴脉象手环</p>
                            </div>
                            <div class="bg-white rounded-xl shadow-card p-6 text-center">
                                <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mx-auto mb-4">3</div>
                                <h4 class="text-lg font-semibold text-neutral mb-2">体质评估</h4>
                                <p class="text-gray-600 text-sm">1-2分钟内分析用户数据，生成体质概率分布</p>
                            </div>
                            <div class="bg-white rounded-xl shadow-card p-6 text-center">
                                <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mx-auto mb-4">4</div>
                                <h4 class="text-lg font-semibold text-neutral mb-2">个性化方案</h4>
                                <p class="text-gray-600 text-sm">获取包含饮食、运动、药膳、情志四大模块的方案</p>
                            </div>
                            <div class="bg-white rounded-xl shadow-card p-6 text-center">
                                <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mx-auto mb-4">5</div>
                                <h4 class="text-lg font-semibold text-neutral mb-2">健康管理</h4>
                                <p class="text-gray-600 text-sm">每日打卡、积分奖励、周期性复评，监测体质变化</p>
                            </div>
                        </div>
                        
                        <!-- 数据可视化部分 -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
                            <!-- 个人健康趋势图表 -->
                            <div class="bg-white rounded-xl shadow-card p-6">
                                <h4 class="text-lg font-semibold text-neutral mb-4">个人健康趋势</h4>
                                <div class="h-72">
                                    <canvas id="healthTrendChart"></canvas>
                                </div>
                                <div class="mt-4 text-sm text-gray-500">
                                    <p>通过定期评估，系统记录您的体质变化趋势，帮助您了解调理效果</p>
                                </div>
                            </div>
                            
                            <!-- 个性化调理建议 -->
                            <div class="bg-white rounded-xl shadow-card p-6">
                                <h4 class="text-lg font-semibold text-neutral mb-4">个性化调理建议</h4>
                                <div class="space-y-4">
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-600 mr-4 mt-1">
                                            <i class="fa fa-cutlery"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-neutral">饮食调理</h5>
                                            <p class="text-gray-600 text-sm mt-1">建议多食用健脾利湿的食物，如山药、薏米、赤小豆等，减少寒凉食物摄入</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600 mr-4 mt-1">
                                            <i class="fa fa-heartbeat"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-neutral">运动调理</h5>
                                            <p class="text-gray-600 text-sm mt-1">每天进行30分钟温和运动，如散步、太极拳等，避免过度劳累</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600 mr-4 mt-1">
                                            <i class="fa fa-leaf"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-neutral">药膳调理</h5>
                                            <p class="text-gray-600 text-sm mt-1">推荐食用四君子汤加减，或山药百合粥，每周2-3次</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <div class="w-10 h-10 rounded-lg bg-yellow-100 flex items-center justify-center text-yellow-600 mr-4 mt-1">
                                            <i class="fa fa-smile-o"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-neutral">情志调理</h5>
                                            <p class="text-gray-600 text-sm mt-1">保持心情舒畅，避免过度思虑，建议每日冥想10-15分钟</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 移动端界面展示 -->
                        <div class="flex justify-center">
                            <div class="relative">
                                <div class="bg-gray-100 rounded-lg aspect-[9/16] p-2 max-w-[300px] mx-auto">
                                    <div class="bg-white rounded-lg h-full overflow-hidden">
                                        <img src="https://picsum.photos/id/655/600/1200" alt="患者端界面" class="w-full h-full object-cover">
                                    </div>
                                </div>
                                <!-- 装饰元素 -->
                                <div class="absolute -z-10 top-5 left-1/2 transform -translate-x-1/2 w-full max-w-[320px] h-full rounded-lg bg-primary/10"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 医师端演示 -->
                    <div id="doctor-demo" class="demo-tab-content hidden">
                        <h3 class="text-2xl font-bold text-neutral mb-6">医师协作平台</h3>
                        <p class="text-gray-600 mb-8">医师可以通过后台系统获取详细的体质评估数据和分析结果，作为辨证论治的客观依据，并与患者进行远程协作</p>
                        
                        <!-- 统计卡片 -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                            <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-gray-500 text-sm">今日评估人数</p>
                                        <h4 class="text-3xl font-bold text-neutral mt-1">128</h4>
                                        <p class="text-green-500 text-sm mt-2"><i class="fa fa-arrow-up"></i> 12.5%</p>
                                    </div>
                                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                                        <i class="fa fa-user-md text-xl"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-gray-500 text-sm">累计患者</p>
                                        <h4 class="text-3xl font-bold text-neutral mt-1">3,245</h4>
                                        <p class="text-green-500 text-sm mt-2"><i class="fa fa-arrow-up"></i> 8.3%</p>
                                    </div>
                                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                                        <i class="fa fa-users text-xl"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-gray-500 text-sm">平均调理效果</p>
                                        <h4 class="text-3xl font-bold text-neutral mt-1">78.5%</h4>
                                        <p class="text-green-500 text-sm mt-2"><i class="fa fa-arrow-up"></i> 3.2%</p>
                                    </div>
                                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                                        <i class="fa fa-line-chart text-xl"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 医护端界面 -->
                        <div class="bg-white rounded-xl shadow-card p-6 mb-8">
                            <h3 class="text-xl font-bold text-neutral mb-6">医护端</h3>
                            
                            <!-- 患者选择 -->
                            <div class="mb-6">
                                <label class="block text-gray-600 mb-2">选择患者：</label>
                                <select id="patient-select" class="w-full p-2 border rounded-md">
                                    <option value="patient1">王先生 - 2025005678</option>
                                    <option value="patient2">李女士 - 2025005679</option>
                                    <option value="patient3">张先生 - 2025005680</option>
                                </select>
                            </div>
                            
                            <!-- 患者基本信息 -->
                            <div class="mb-8">
                                <h4 class="text-lg font-semibold text-neutral mb-4">患者基本信息</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="flex justify-between border-b pb-2">
                                        <span class="text-gray-600">姓名</span>
                                        <span id="patient-name" class="font-medium">王先生</span>
                                    </div>
                                    <div class="flex justify-between border-b pb-2">
                                        <span class="text-gray-600">性别</span>
                                        <span id="patient-gender" class="font-medium">男</span>
                                    </div>
                                    <div class="flex justify-between border-b pb-2">
                                        <span class="text-gray-600">年龄</span>
                                        <span id="patient-age" class="font-medium">60岁</span>
                                    </div>
                                    <div class="flex justify-between border-b pb-2">
                                        <span class="text-gray-600">住院号</span>
                                        <span id="patient-id" class="font-medium">2025005678</span>
                                    </div>
                                    <div class="flex justify-between border-b pb-2 md:col-span-2">
                                        <span class="text-gray-600">主诉</span>
                                        <span id="patient-complaint" class="font-medium">头晕、失眠1个月</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 患者健康数据仪表盘 -->
                            <div class="mb-8">
                                <div class="bg-green-600 text-white p-3 rounded-t-lg">
                                    <h4 class="text-lg font-semibold">患者健康数据仪表盘</h4>
                                </div>
                                <div class="border border-gray-200 rounded-b-lg p-4">
                                    <!-- 血压趋势图 -->
                                    <div class="mb-6">
                                        <h5 class="text-md font-medium mb-3">血压（收缩/舒张）趋势</h5>
                                        <div class="h-64">
                                            <canvas id="bloodPressureChart"></canvas>
                                        </div>
                                    </div>
                                    
                                    <!-- 脉搏趋势图 -->
                                    <div>
                                        <h5 class="text-md font-medium mb-3">脉搏（次/分钟）趋势</h5>
                                        <div class="h-64">
                                            <canvas id="pulseRateChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 中医AI问诊辅助系统 -->
                            <div class="mb-8 bg-white rounded-xl shadow-card overflow-hidden">
                                <div class="bg-primary text-white p-3">
                                    <h4 class="text-lg font-semibold flex items-center">
                                        <i class="fa fa-robot mr-2"></i>中医AI问诊辅助系统
                                    </h4>
                                </div>
                                <div class="p-5">
                                    <!-- 问诊输入区域 -->
                                    <div class="mb-4">
                                        <label class="block text-gray-600 mb-2">输入症状或问题：</label>
                                        <textarea id="ai-question" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入患者的症状描述，如'患者头晕、失眠1个月，伴有腰膝酸软...'"></textarea>
                                    </div>
                                    
                                    <!-- 体质类型选择 -->
                                    <div class="mb-4">
                                        <label class="block text-gray-600 mb-2">患者体质类型（可多选）：</label>
                                        <div class="flex flex-wrap gap-2">
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="平和质">
                                                <span class="ml-2 text-sm text-gray-700">平和质</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="气虚质">
                                                <span class="ml-2 text-sm text-gray-700">气虚质</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="阳虚质">
                                                <span class="ml-2 text-sm text-gray-700">阳虚质</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="阴虚质">
                                                <span class="ml-2 text-sm text-gray-700">阴虚质</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="痰湿质">
                                                <span class="ml-2 text-sm text-gray-700">痰湿质</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="湿热质">
                                                <span class="ml-2 text-sm text-gray-700">湿热质</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="血瘀质">
                                                <span class="ml-2 text-sm text-gray-700">血瘀质</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="气郁质">
                                                <span class="ml-2 text-sm text-gray-700">气郁质</span>
                                            </label>
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" class="form-checkbox text-primary rounded" value="特禀质">
                                                <span class="ml-2 text-sm text-gray-700">特禀质</span>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <!-- 功能选项 -->
                                    <div class="mb-4">
                                        <label class="block text-gray-600 mb-2">请求类型：</label>
                                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                            <label class="border border-gray-300 rounded-lg p-3 cursor-pointer hover:border-primary transition-colors">
                                                <input type="radio" name="ai-request-type" value="diagnosis" class="mr-2" checked>
                                                <span>辨证分析</span>
                                            </label>
                                            <label class="border border-gray-300 rounded-lg p-3 cursor-pointer hover:border-primary transition-colors">
                                                <input type="radio" name="ai-request-type" value="treatment" class="mr-2">
                                                <span>治疗方案</span>
                                            </label>
                                            <label class="border border-gray-300 rounded-lg p-3 cursor-pointer hover:border-primary transition-colors">
                                                <input type="radio" name="ai-request-type" value="explanation" class="mr-2">
                                                <span>知识解释</span>
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <!-- 提交按钮 -->
                                    <button id="ai-submit" class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center justify-center">
                                        <i class="fa fa-magic mr-2"></i>获取AI辅助建议
                                    </button>
                                </div>
                                
                                <!-- AI回复区域 -->
                                <div id="ai-response-area" class="border-t border-gray-200 p-5 hidden">
                                    <div class="flex items-center justify-between mb-4">
                                        <h5 class="text-md font-semibold flex items-center">
                                            <i class="fa fa-commenting text-primary mr-2"></i>AI辅助建议
                                        </h5>
                                        <span id="ai-response-time" class="text-xs text-gray-500">刚刚</span>
                                    </div>
                                    <div id="ai-response-content" class="bg-gray-50 p-4 rounded-lg min-h-[150px] whitespace-pre-line">
                                        <!-- AI回复内容将在这里显示 -->
                                    </div>
                                    <div class="mt-4 flex justify-end gap-2">
                                        <button id="ai-copy" class="px-4 py-1 border border-gray-300 rounded-lg text-sm hover:bg-gray-50 transition-colors">
                                            <i class="fa fa-copy mr-1"></i>复制
                                        </button>
                                        <button id="ai-new" class="px-4 py-1 bg-primary/10 text-primary rounded-lg text-sm hover:bg-primary/20 transition-colors">
                                            <i class="fa fa-refresh mr-1"></i>新问题
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <script>
                                // 患者数据
                                const patientData = {
                                    patient1: {
                                        name: '王先生',
                                        gender: '男',
                                        age: '60岁',
                                        id: '2025005678',
                                        complaint: '头晕、失眠1个月',
                                        bloodPressure: {
                                            dates: ['2025-10-25', '2025-10-26', '2025-10-27', '2025-10-28', '2025-10-29', '2025-10-30', '2025-10-31'],
                                            systolic: [125, 130, 128, 132, 130, 127, 128],
                                            diastolic: [78, 80, 79, 81, 80, 77, 78]
                                        },
                                        pulseRate: {
                                            dates: ['2025-10-25', '2025-10-26', '2025-10-27', '2025-10-28', '2025-10-29', '2025-10-30', '2025-10-31'],
                                            values: [72, 75, 73, 76, 74, 72, 73]
                                        }
                                    },
                                    patient2: {
                                        name: '李女士',
                                        gender: '女',
                                        age: '55岁',
                                        id: '2025005679',
                                        complaint: '胸闷、乏力2周',
                                        bloodPressure: {
                                            dates: ['2025-10-25', '2025-10-26', '2025-10-27', '2025-10-28', '2025-10-29', '2025-10-30', '2025-10-31'],
                                            systolic: [118, 122, 120, 124, 121, 119, 120],
                                            diastolic: [75, 77, 76, 78, 76, 74, 75]
                                        },
                                        pulseRate: {
                                            dates: ['2025-10-25', '2025-10-26', '2025-10-27', '2025-10-28', '2025-10-29', '2025-10-30', '2025-10-31'],
                                            values: [78, 80, 79, 81, 77, 76, 78]
                                        }
                                    },
                                    patient3: {
                                        name: '张先生',
                                        gender: '男',
                                        age: '65岁',
                                        id: '2025005680',
                                        complaint: '关节疼痛、活动受限1个月',
                                        bloodPressure: {
                                            dates: ['2025-10-25', '2025-10-26', '2025-10-27', '2025-10-28', '2025-10-29', '2025-10-30', '2025-10-31'],
                                            systolic: [130, 135, 133, 138, 135, 132, 133],
                                            diastolic: [82, 85, 83, 86, 84, 81, 82]
                                        },
                                        pulseRate: {
                                            dates: ['2025-10-25', '2025-10-26', '2025-10-27', '2025-10-28', '2025-10-29', '2025-10-30', '2025-10-31'],
                                            values: [75, 78, 76, 79, 77, 74, 75]
                                        }
                                    }
                                };
                                
                                // 血压图表
                                let bloodPressureChart;
                                let pulseRateChart;
                                
                                // 初始化图表
                                function initCharts(patientId) {
                                    const patient = patientData[patientId];
                                    
                                    // 销毁现有图表
                                    if (bloodPressureChart) bloodPressureChart.destroy();
                                    if (pulseRateChart) pulseRateChart.destroy();
                                    
                                    // 创建血压图表
                                    const bpCtx = document.getElementById('bloodPressureChart').getContext('2d');
                                    bloodPressureChart = new Chart(bpCtx, {
                                        type: 'line',
                                        data: {
                                            labels: patient.bloodPressure.dates,
                                            datasets: [
                                                {
                                                    label: '收缩压(mmHg)',
                                                    data: patient.bloodPressure.systolic,
                                                    borderColor: 'rgb(255, 99, 132)',
                                                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                                                    tension: 0.4,
                                                    fill: true
                                                },
                                                {
                                                    label: '舒张压(mmHg)',
                                                    data: patient.bloodPressure.diastolic,
                                                    borderColor: 'rgb(54, 162, 235)',
                                                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                                                    tension: 0.4,
                                                    fill: true
                                                }
                                            ]
                                        },
                                        options: {
                                            responsive: true,
                                            maintainAspectRatio: false,
                                            scales: {
                                                y: {
                                                    beginAtZero: false,
                                                    min: 60
                                                }
                                            }
                                        }
                                    });
                                    
                                    // 创建脉搏图表
                                    const pulseCtx = document.getElementById('pulseRateChart').getContext('2d');
                                    pulseRateChart = new Chart(pulseCtx, {
                                        type: 'line',
                                        data: {
                                            labels: patient.pulseRate.dates,
                                            datasets: [
                                                {
                                                    label: '脉搏(次/分钟)',
                                                    data: patient.pulseRate.values,
                                                    borderColor: 'rgb(255, 159, 64)',
                                                    backgroundColor: 'rgba(255, 159, 64, 0.1)',
                                                    tension: 0.4,
                                                    fill: true
                                                }
                                            ]
                                        },
                                        options: {
                                            responsive: true,
                                            maintainAspectRatio: false,
                                            scales: {
                                                y: {
                                                    beginAtZero: false,
                                                    min: 65
                                                }
                                            }
                                        }
                                    });
                                }
                                
                                // 更新患者信息
                                function updatePatientInfo(patientId) {
                                    const patient = patientData[patientId];
                                    document.getElementById('patient-name').textContent = patient.name;
                                    document.getElementById('patient-gender').textContent = patient.gender;
                                    document.getElementById('patient-age').textContent = patient.age;
                                    document.getElementById('patient-id').textContent = patient.id;
                                    document.getElementById('patient-complaint').textContent = patient.complaint;
                                    
                                    // 更新图表
                                    initCharts(patientId);
                                }
                                
                                // 事件监听器
                                document.getElementById('patient-select').addEventListener('change', function() {
                                    updatePatientInfo(this.value);
                                });
                                
                                // 页面加载时初始化
                                window.addEventListener('DOMContentLoaded', function() {
                                    initCharts('patient1');
                                });
                            </script>
                            
                            <!-- 中医体质评估表 -->
                            <div>
                                <h4 class="text-lg font-semibold text-neutral mb-4">中医体质评估表</h4>
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-gray-600 mb-1">望诊:</label>
                                        <input type="text" class="w-full p-2 border rounded-md" placeholder="我">
                                    </div>
                                    <div>
                                        <label class="block text-gray-600 mb-1">闻诊:</label>
                                        <input type="text" class="w-full p-2 border rounded-md" placeholder="气味、声音">
                                    </div>
                                    <div>
                                        <label class="block text-gray-600 mb-1">问诊:</label>
                                        <input type="text" class="w-full p-2 border rounded-md" placeholder="主诉、病史">
                                    </div>
                                    <div>
                                        <label class="block text-gray-600 mb-1">切诊:</label>
                                        <input type="text" class="w-full p-2 border rounded-md" placeholder="脉象、触诊">
                                    </div>
                                    <div>
                                        <label class="block text-gray-600 mb-1">辨证分型:</label>
                                        <select class="w-full p-2 border rounded-md">
                                            <option>血瘀</option>
                                            <option>气滞</option>
                                            <option>湿热</option>
                                            <option>痰湿</option>
                                            <option>阴虚</option>
                                            <option>阳虚</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-gray-600 mb-1">治疗原则:</label>
                                        <input type="text" class="w-full p-2 border rounded-md" placeholder="补气、活血等">
                                    </div>
                                    <div>
                                        <label class="block text-gray-600 mb-1">中药处方:</label>
                                        <textarea class="w-full p-2 border rounded-md" rows="2" placeholder="黄芪30g、当归15g、党参20g"></textarea>
                                    </div>
                                    <div>
                                        <label class="block text-gray-600 mb-1">针灸/推拿:</label>
                                        <textarea class="w-full p-2 border rounded-md" rows="2" placeholder="选穴、手法、频次"></textarea>
                                    </div>
                                    <button class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-colors">
                                        提交评估
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据可视化图表区域 - 3列网格 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <!-- 患者群体体质分布环形图 -->
                            <div class="bg-white rounded-xl shadow-card p-6">
                                <h4 class="text-lg font-semibold text-neutral mb-4">患者群体体质分布</h4>
                                <div class="h-72">
                                    <canvas id="patientConstitutionChart"></canvas>
                                </div>
                            </div>
                            
                            <!-- 月度评估数量趋势柱状图 -->
                            <div class="bg-white rounded-xl shadow-card p-6">
                                <h4 class="text-lg font-semibold text-neutral mb-4">月度评估数量趋势</h4>
                                <div class="h-72">
                                    <canvas id="monthlyAssessmentChart"></canvas>
                                </div>
                            </div>
                            
                            <!-- 调理效果统计雷达图 -->
                            <div class="bg-white rounded-xl shadow-card p-6">
                                <h4 class="text-lg font-semibold text-neutral mb-4">调理效果统计</h4>
                                <div class="h-72">
                                    <canvas id="treatmentEffectChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评估流程 -->
                    <div id="assessment-process" class="demo-tab-content hidden">
                        <h3 class="text-2xl font-bold text-neutral mb-6">体质评估流程</h3>
                        <p class="text-gray-600 mb-8">基于中医理论，结合现代技术，提供科学、全面、便捷的体质评估服务</p>
                        
                        <!-- 流程步骤 -->
                        <div class="relative">
                            <!-- 连接线 -->
                            <div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-primary/20 -translate-x-1/2 hidden md:block"></div>
                            
                            <!-- 步骤1 -->
                            <div class="relative z-10 flex flex-col md:flex-row items-center justify-between mb-16">
                                <div class="order-2 md:order-1 w-full md:w-5/12 md:pr-12 text-center md:text-right">
                                    <h4 class="text-xl font-semibold text-neutral mb-3">中医四诊信息采集</h4>
                                    <p class="text-gray-600">通过智能舌诊、脉诊设备和结构化问卷，全面采集用户的中医四诊信息，包括舌象、脉象、问诊内容等。</p>
                                </div>
                                <div class="order-1 md:order-2 w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mb-6 md:mb-0 z-20">1</div>
                                <div class="order-3 w-full md:w-5/12 md:pl-12">
                                    <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                        <div class="flex items-center mb-4">
                                            <i class="fa fa-stethoscope text-2xl text-primary mr-3"></i>
                                            <h5 class="text-lg font-semibold text-neutral">智能舌诊</h5>
                                        </div>
                                        <p class="text-gray-600 text-sm">AI分析舌色、舌苔、舌形等特征，识别体质相关的舌象表现</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 步骤2 -->
                            <div class="relative z-10 flex flex-col md:flex-row items-center justify-between mb-16">
                                <div class="order-2 md:order-1 w-full md:w-5/12 md:pr-12 order-last md:order-first">
                                    <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                        <div class="flex items-center mb-4">
                                            <i class="fa fa-cogs text-2xl text-primary mr-3"></i>
                                            <h5 class="text-lg font-semibold text-neutral">多模态数据融合</h5>
                                        </div>
                                        <p class="text-gray-600 text-sm">将舌象、脉象、问诊等多维度数据进行融合分析，构建完整的体质特征图谱</p>
                                    </div>
                                </div>
                                <div class="order-1 md:order-2 w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mb-6 md:mb-0 z-20">2</div>
                                <div class="order-3 w-full md:w-5/12 md:pl-12 text-center md:text-left">
                                    <h4 class="text-xl font-semibold text-neutral mb-3">AI智能分析</h4>
                                    <p class="text-gray-600">基于中医理论和大数据训练的AI模型，对采集的信息进行智能分析，识别体质类型和特征。</p>
                                </div>
                            </div>
                            
                            <!-- 步骤3 -->
                            <div class="relative z-10 flex flex-col md:flex-row items-center justify-between mb-16">
                                <div class="order-2 md:order-1 w-full md:w-5/12 md:pr-12 text-center md:text-right">
                                    <h4 class="text-xl font-semibold text-neutral mb-3">体质评估报告生成</h4>
                                    <p class="text-gray-600">系统自动生成详细的体质评估报告，包括体质类型、偏颇程度、特征表现、健康风险等。</p>
                                </div>
                                <div class="order-1 md:order-2 w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mb-6 md:mb-0 z-20">3</div>
                                <div class="order-3 w-full md:w-5/12 md:pl-12">
                                    <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                        <div class="flex items-center mb-4">
                                            <i class="fa fa-file-text-o text-2xl text-primary mr-3"></i>
                                            <h5 class="text-lg font-semibold text-neutral">个性化报告</h5>
                                        </div>
                                        <p class="text-gray-600 text-sm">报告包含体质概率分布、主要特征、调理重点等内容，为用户提供清晰的健康指导</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 步骤4 -->
                            <div class="relative z-10 flex flex-col md:flex-row items-center justify-between">
                                <div class="order-2 md:order-1 w-full md:w-5/12 md:pr-12 order-last md:order-first">
                                    <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                        <div class="flex items-center mb-4">
                                            <i class="fa fa-heartbeat text-2xl text-primary mr-3"></i>
                                            <h5 class="text-lg font-semibold text-neutral">健康管理计划</h5>
                                        </div>
                                        <p class="text-gray-600 text-sm">根据体质评估结果，系统提供个性化的健康管理方案，包括饮食、运动、药膳、情志调理等方面</p>
                                    </div>
                                </div>
                                <div class="order-1 md:order-2 w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center font-bold text-xl mb-6 md:mb-0 z-20">4</div>
                                <div class="order-3 w-full md:w-5/12 md:pl-12 text-center md:text-left">
                                    <h4 class="text-xl font-semibold text-neutral mb-3">个性化调理方案</h4>
                                    <p class="text-gray-600">基于体质评估结果，结合用户的年龄、性别、生活习惯等因素，生成个性化的调理建议和健康管理方案。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
                        <h3 class="text-2xl font-bold text-neutral mb-6">医师协作平台</h3>
                        <p class="text-gray-600 mb-8">医师可以通过后台系统获取详细的体质评估数据和分析结果，作为辨证论治的客观依据，并与患者进行远程协作</p>
                        
                        <!-- 统计卡片 -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                            <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-gray-500 text-sm">今日评估人数</p>
                                        <h4 class="text-3xl font-bold text-neutral mt-1">128</h4>
                                        <p class="text-green-500 text-sm mt-2"><i class="fa fa-arrow-up"></i> 12.5%</p>
                                    </div>
                                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
                                        <i class="fa fa-user-md text-xl"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-gray-500 text-sm">累计患者</p>
                                        <h4 class="text-3xl font-bold text-neutral mt-1">3,245</h4>
                                        <p class="text-green-500 text-sm mt-2"><i class="fa fa-arrow-up"></i> 8.3%</p>
                                    </div>
                                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                                        <i class="fa fa-users text-xl"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-white rounded-xl shadow-card p-6 hover-scale">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-gray-500 text-sm">平均调理效果</p>
                                        <h4 class="text-3xl font-bold text-neutral mt-1">78.5%</h4>
                                        <p class="text-green-500 text-sm mt-2"><i class="fa fa-arrow-up"></i> 3.2%</p>
                                    </div>
                                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
                                        <i class="fa fa-line-chart text-xl"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据可视化图表区域 - 3列网格 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <!-- 患者群体体质分布环形图 -->
                            <div class="bg-white rounded-xl shadow-card p-6">
                                <h4 class="text-lg font-semibold text-neutral mb-4">患者群体体质分布</h4>
                                <div class="h-72">
                                    <canvas id="patientConstitutionChart"></canvas>
                                </div>
                            </div>
                            
                            <!-- 月度评估数量趋势柱状图 -->
                            <div class="bg-white rounded-xl shadow-card p-6">
                                <h4 class="text-lg font-semibold text-neutral mb-4">月度评估数量趋势</h4>
                                <div class="h-72">
                                    <canvas id="monthlyAssessmentChart"></canvas>
                                </div>
                            </div>
                            
                            <!-- 调理效果统计雷达图 -->
                            <div class="bg-white rounded-xl shadow-card p-6">
                                <h4 class="text-lg font-semibold text-neutral mb-4">调理效果统计</h4>
                                <div class="h-72">
                                    <canvas id="treatmentEffectChart"></canvas>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 功能介绍区域 -->
                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-8">
                            <div class="bg-gray-50 p-5 rounded-lg">
                                <h4 class="text-lg font-semibold text-primary mb-3">体质评估数据</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>详细的体质概率分布图</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>舌象、脉象原始数据与分析结果</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>问卷回答详情与关键特征提取</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div class="bg-gray-50 p-5 rounded-lg">
                                <h4 class="text-lg font-semibold text-primary mb-3">辅助诊断功能</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>系统自动预警与异常指标标记</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>历史评估数据对比分析</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>体质变化趋势图表</span>
                                    </li>
                                </ul>
                            </div>
                            
                            <div class="bg-gray-50 p-5 rounded-lg">
                                <h4 class="text-lg font-semibold text-primary mb-3">远程协作功能</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>一键共享报告功能</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>远程会诊支持</span>
                                    </li>
                                    <li class="flex items-center">
                                        <i class="fa fa-check-circle text-accent mr-2"></i>
                                        <span>跨机构专家协作平台</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评估流程演示 -->
                    <div id="assessment-demo" class="hidden">
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                            <div>
                                <h3 class="text-2xl font-bold text-neutral mb-4">体质评估流程</h3>
                                <p class="text-gray-600 mb-6">\                                    我们的平台通过多模态数据采集和AI分析，实现全面、精准的中医体质评估，整个过程科学、客观、可解释
                                </p>
                                
                                <div class="space-y-4">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1">
                                            <i class="fa fa-list-alt text-xl"></i>
                                        </div>
                                        <div>
                                            <h4 class="text-lg font-semibold text-neutral mb-1">结构化问卷</h4>
                                            <p class="text-gray-600">基于王琦九种体质量表，通过TabNet模型提取关键特征</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1">
                                            <i class="fa fa-camera text-xl"></i>
                                        </div>
                                        <div>
                                            <h4 class="text-lg font-semibold text-neutral mb-1">舌象采集分析</h4>
                                            <p class="text-gray-600">使用CNN/ViT模型分析舌色、舌形、舌苔等特征</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1">
                                            <i class="fa fa-heartbeat text-xl"></i>
                                        </div>
                                        <div>
                                            <h4 class="text-lg font-semibold text-neutral mb-1">脉象采集分析</h4>
                                            <p class="text-gray-600">通过时序Transformer捕捉脉象波形特征和变化规律</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1">
                                            <i class="fa fa-dna text-xl"></i>
                                        </div>
                                        <div>
                                            <h4 class="text-lg font-semibold text-neutral mb-1">基因/代谢数据</h4>
                                            <p class="text-gray-600">结合现代医学检测数据，从分子层面辅助体质辨识</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 mt-1">
                                            <i class="fa fa-random text-xl"></i>
                                        </div>
                                        <div>
                                            <h4 class="text-lg font-semibold text-neutral mb-1">多模态融合</h4>
                                            <p class="text-gray-600">通过Transformer-Fusion层融合各模态特征，输出体质概率分布</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <div class="bg-white rounded-xl shadow-card p-6">
                                    <h3 class="text-xl font-bold text-neutral mb-6">八大体质雷达图</h3>
                                    <div class="h-80">
                                        <canvas id="constitutionRadarChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-20 px-4 md:px-8">
        <div class="container mx-auto max-w-7xl">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-neutral mb-4">联系我们</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">\                    如果您对我们的中医体质评估平台感兴趣，或者有任何问题和建议，请随时联系我们
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-elegant p-8">
                    <h3 class="text-2xl font-bold text-neutral mb-6">发送消息</h3>
                    <form id="contact-form" class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入您的姓名">
                            </div>
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入您的邮箱">
                            </div>
                        </div>
                        <div>
                            <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                            <input type="text" id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入消息主题">
                        </div>
                        <div>
                            <label for="message" class="block text-sm font-medium text-gray-700 mb-1">消息内容</label>
                            <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all" placeholder="请输入您的消息内容"></textarea>
                        </div>
                        <div>
                            <button type="submit" class="px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-lg">\                                发送消息
                            </button>
                        </div>
                    </form>
                </div>
                
                <div>
                    <div class="bg-white rounded-xl shadow-elegant p-8 mb-8">
                        <h3 class="text-2xl font-bold text-neutral mb-6">联系方式</h3>
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                    <i class="fa fa-map-marker text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-neutral mb-1">地址</h4>
                                    <p class="text-gray-600">北京市海淀区中关村南大街5号</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                    <i class="fa fa-phone text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-neutral mb-1">电话</h4>
                                    <p class="text-gray-600">+86 10 8888 8888</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                    <i class="fa fa-envelope text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-neutral mb-1">邮箱</h4>
                                    <p class="text-gray-600">contact@tcmhealth.ai</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-elegant p-8">
                        <h3 class="text-2xl font-bold text-neutral mb-6">关注我们</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-weixin text-xl"></i>
                            </a>
                            <a href="#" class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-weibo text-xl"></i>
                            </a>
                            <a href="#" class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-linkedin text-xl"></i>
                            </a>
                            <a href="#" class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-github text-xl"></i>
                            </a>
                        </div>
                        <div class="mt-6">
                            <h4 class="text-lg font-semibold text-neutral mb-3">订阅我们的通讯</h4>
                            <div class="flex">
                                <input type="email" placeholder="请输入您的邮箱" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all">
                                <button class="px-4 py-2 bg-primary text-white rounded-r-lg hover:bg-primary/90 transition-colors">\                                    订阅
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-12 px-4">
        <div class="container mx-auto max-w-7xl">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-6">
                        <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center text-white mr-3">
                            <i class="fa fa-heartbeat text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">中医体质评估平台</h3>
                    </div>
                    <p class="text-gray-400 mb-6">\                        融合传统中医智慧与现代人工智能技术，提供科学、精准的体质评估和个性化健康管理服务
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">\                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">\                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">\                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">\                            <i class="fa fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="#overview" class="text-gray-400 hover:text-white transition-colors">项目概述</a></li>
                        <li><a href="#features" class="text-gray-400 hover:text-white transition-colors">功能特性</a></li>
                        <li><a href="#architecture" class="text-gray-400 hover:text-white transition-colors">系统架构</a></li>
                        <li><a href="#demo" class="text-gray-400 hover:text-white transition-colors">系统演示</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">资源中心</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">中医体质知识</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">健康调理指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">研究论文</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">用户手册</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">法律信息</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">服务条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">数据安全</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">医疗声明</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">网站地图</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 text-sm mb-4 md:mb-0">\                    © 2023 中医体质评估平台. 保留所有权利.
                </p>
                <p class="text-gray-400 text-sm">\                    本平台仅供健康管理参考，不替代专业医疗诊断和治疗
                </p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 100) {
                navbar.classList.add('bg-white', 'shadow-md');
                navbar.classList.remove('glassmorphism');
            } else {
                navbar.classList.remove('bg-white', 'shadow-md');
                navbar.classList.add('glassmorphism');
            }
        });
        
        // 移动端菜单切换
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
                // 关闭移动端菜单
                mobileMenu.classList.add('hidden');
            });
        });
        
        // 舌象图片切换
        function changeTongueImage(type) {
            const tongueImage = document.getElementById('tongueImage');
            const tongueAnalysis = document.getElementById('tongueAnalysis');
            
            if (type === 1) {
                tongueImage.src = 'https://picsum.photos/id/25/400/400';
                tongueAnalysis.innerHTML = `
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌色：</span>
                            <span>淡白</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌形：</span>
                            <span>胖大，边有齿痕</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌苔：</span>
                            <span>白腻</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">主证：</span>
                            <span>脾虚湿盛</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">建议：</span>
                            <span>健脾利湿，可食用山药、薏米、赤小豆等</span>
                        </li>
                    </ul>
                `;
            } else if (type === 2) {
                tongueImage.src = 'https://picsum.photos/id/26/400/400';
                tongueAnalysis.innerHTML = `
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌色：</span>
                            <span>红</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌形：</span>
                            <span>瘦</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌苔：</span>
                            <span>黄</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">主证：</span>
                            <span>阴虚内热</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">建议：</span>
                            <span>滋阴降火，可食用银耳、百合、莲子等</span>
                        </li>
                    </ul>
                `;
            } else if (type === 3) {
                tongueImage.src = 'https://picsum.photos/id/27/400/400';
                tongueAnalysis.innerHTML = `
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌色：</span>
                            <span>淡</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌形：</span>
                            <span>胖嫩</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">舌苔：</span>
                            <span>白滑</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">主证：</span>
                            <span>脾肾阳虚</span>
                        </li>
                        <li class="flex items-start">
                            <span class="font-medium min-w-[80px]">建议：</span>
                            <span>温补脾肾，可食用羊肉、桂圆、生姜等</span>
                        </li>
                    </ul>
                `;
            }
        }
        
        // 演示标签页切换
        function switchDemoTab(tab, event) {
            // 隐藏所有标签页内容
            const patientDemo = document.getElementById('patient-demo');
            const doctorDemo = document.getElementById('doctor-demo');
            const assessmentDemo = document.getElementById('assessment-demo');
            
            if (patientDemo) patientDemo.classList.add('hidden');
            if (doctorDemo) doctorDemo.classList.add('hidden');
            if (assessmentDemo) assessmentDemo.classList.add('hidden');
            
            // 移除所有标签按钮的激活状态
            const tabButtons = document.querySelectorAll('#demo button');
            tabButtons.forEach(button => {
                button.classList.remove('text-primary', 'border-b-2', 'border-primary');
                button.classList.add('text-gray-500');
            });
            
            // 显示选中的标签页内容
            const activeDemo = document.getElementById(`${tab}-demo`);
            if (activeDemo) activeDemo.classList.remove('hidden');
            
            // 激活选中的标签按钮
            if (event && event.currentTarget) {
                event.currentTarget.classList.remove('text-gray-500');
                event.currentTarget.classList.add('text-primary', 'border-b-2', 'border-primary');
            }
            
            // 初始化对应的数据可视化图表
            if (tab === 'assessment' && !window.radarChartInitialized) {
                initConstitutionRadarChart();
                window.radarChartInitialized = true;
            }
            if (tab === 'doctor' && !window.doctorChartsInitialized) {
                initDoctorCharts();
                window.doctorChartsInitialized = true;
            }
        }
        
        // 初始化体质概率分布图
        window.addEventListener('load', function() {
            // 体质概率分布图
            const ctx1 = document.getElementById('constitutionChart').getContext('2d');
            new Chart(ctx1, {
                type: 'bar',
                data: {
                    labels: ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质', '特禀质'],
                    datasets: [{
                        label: '体质概率 (%)',
                        data: [15, 25, 12, 8, 30, 5, 3, 2, 0],
                        backgroundColor: [
                            'rgba(142, 68, 173, 0.7)',
                            'rgba(211, 84, 0, 0.7)',
                            'rgba(39, 174, 96, 0.7)',
                            'rgba(231, 76, 60, 0.7)',
                            'rgba(241, 196, 15, 0.7)',
                            'rgba(52, 152, 219, 0.7)',
                            'rgba(155, 89, 182, 0.7)',
                            'rgba(46, 204, 113, 0.7)',
                            'rgba(243, 156, 18, 0.7)'
                        ],
                        borderColor: [
                            'rgba(142, 68, 173, 1)',
                            'rgba(211, 84, 0, 1)',
                            'rgba(39, 174, 96, 1)',
                            'rgba(231, 76, 60, 1)',
                            'rgba(241, 196, 15, 1)',
                            'rgba(52, 152, 219, 1)',
                            'rgba(155, 89, 182, 1)',
                            'rgba(46, 204, 113, 1)',
                            'rgba(243, 156, 18, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100
                        }
                    }
                }
            });
        });
        
        // 初始化体质雷达图
        function initConstitutionRadarChart() {
            const ctx2 = document.getElementById('constitutionRadarChart').getContext('2d');
            new Chart(ctx2, {
                type: 'radar',
                data: {
                    labels: ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质', '特禀质'],
                    datasets: [{
                        label: '当前体质',
                        data: [15, 25, 12, 8, 30, 5, 3, 2, 0],
                        backgroundColor: 'rgba(142, 68, 173, 0.2)',
                        borderColor: 'rgba(142, 68, 173, 1)',
                        pointBackgroundColor: 'rgba(142, 68, 173, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(142, 68, 173, 1)'
                    }, {
                        label: '健康参考值',
                        data: [70, 10, 10, 10, 10, 10, 10, 10, 10],
                        backgroundColor: 'rgba(39, 174, 96, 0.2)',
                        borderColor: 'rgba(39, 174, 96, 1)',
                        pointBackgroundColor: 'rgba(39, 174, 96, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(39, 174, 96, 1)',
                        borderDash: [5, 5]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            angleLines: {
                                display: true
                            },
                            suggestedMin: 0,
                            suggestedMax: 100
                        }
                    }
                }
            });
        }
        
        // 表单提交处理
        document.getElementById('contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            // 在实际应用中，这里会处理表单数据并发送到服务器
            alert('感谢您的留言，我们会尽快回复您！');
            this.reset();
        });
        
        // 初始化患者端健康趋势图表
        function initHealthTrendChart() {
            const ctx = document.getElementById('healthTrendChart').getContext('2d');
            if (!ctx) return;
            
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '平和质指数',
                        data: [15, 20, 25, 22, 30, 35],
                        borderColor: 'rgba(142, 68, 173, 1)',
                        backgroundColor: 'rgba(142, 68, 173, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '痰湿质指数',
                        data: [30, 28, 25, 22, 18, 15],
                        borderColor: 'rgba(241, 196, 15, 1)',
                        backgroundColor: 'rgba(241, 196, 15, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 50
                        }
                    }
                }
            });
        }

        // 初始化医师端数据可视化图表
        function initDoctorCharts() {
            // 患者群体体质分布环形图
            const ctx1 = document.getElementById('patientConstitutionChart').getContext('2d');
            if (ctx1) {
                new Chart(ctx1, {
                    type: 'doughnut',
                    data: {
                        labels: ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '其他'],
                        datasets: [{
                            data: [25, 20, 15, 10, 25, 5],
                            backgroundColor: [
                                'rgba(142, 68, 173, 0.7)',
                                'rgba(211, 84, 0, 0.7)',
                                'rgba(39, 174, 96, 0.7)',
                                'rgba(231, 76, 60, 0.7)',
                                'rgba(241, 196, 15, 0.7)',
                                'rgba(52, 152, 219, 0.7)'
                            ],
                            borderColor: '#ffffff',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }

            // 月度评估数量趋势柱状图
            const ctx2 = document.getElementById('monthlyAssessmentChart').getContext('2d');
            if (ctx2) {
                new Chart(ctx2, {
                    type: 'bar',
                    data: {
                        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        datasets: [{
                            label: '评估数量',
                            data: [120, 150, 180, 160, 220, 250],
                            backgroundColor: 'rgba(39, 174, 96, 0.7)',
                            borderColor: 'rgba(39, 174, 96, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }

            // 调理效果统计雷达图
            const ctx3 = document.getElementById('treatmentEffectChart').getContext('2d');
            if (ctx3) {
                new Chart(ctx3, {
                    type: 'radar',
                    data: {
                        labels: ['气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质'],
                        datasets: [{
                            label: '调理前',
                            data: [80, 65, 70, 90, 50, 60, 45],
                            backgroundColor: 'rgba(231, 76, 60, 0.2)',
                            borderColor: 'rgba(231, 76, 60, 1)',
                            pointBackgroundColor: 'rgba(231, 76, 60, 1)'
                        }, {
                            label: '调理后',
                            data: [40, 30, 35, 45, 25, 30, 20],
                            backgroundColor: 'rgba(39, 174, 96, 0.2)',
                            borderColor: 'rgba(39, 174, 96, 1)',
                            pointBackgroundColor: 'rgba(39, 174, 96, 1)'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            r: {
                                beginAtZero: true,
                                max: 100
                            }
                        }
                    }
                });
            }
        }

        // 修改switchDemoTab函数，在切换标签时初始化相应的图表
        function switchDemoTab(tabId, event) {
            // 确保事件对象存在
            if (event) {
                event.preventDefault();
            }
            
            // 隐藏所有标签内容
            const tabContents = document.querySelectorAll('.demo-tab-content');
            if (tabContents.length > 0) {
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });
            }
            
            // 移除所有标签按钮的活动状态
            const tabButtons = document.querySelectorAll('.demo-tab-button');
            if (tabButtons.length > 0) {
                tabButtons.forEach(button => {
                    button.classList.remove('text-purple-700', 'border-b-2', 'border-purple-700');
                    button.classList.add('text-gray-500');
                });
            }
            
            // 显示当前标签内容
            const activeContent = document.getElementById(tabId);
            if (activeContent) {
                activeContent.classList.remove('hidden');
            }
            
            // 设置当前标签按钮为活动状态
            const activeButton = event ? event.currentTarget : document.querySelector(`[onclick*="${tabId}"]`);
            if (activeButton) {
                activeButton.classList.remove('text-gray-500');
                activeButton.classList.add('text-purple-700', 'border-b-2', 'border-purple-700');
            }
            
            // 根据标签页初始化相应的图表
            if (tabId === 'patient-demo') {
                // 延迟初始化，确保DOM已准备好
                setTimeout(initHealthTrendChart, 100);
            } else if (tabId === 'doctor-demo') {
                // 延迟初始化，确保DOM已准备好
                setTimeout(initDoctorCharts, 100);
            } else if (tabId === 'assessment-process') {
                // 延迟初始化，确保DOM已准备好
                setTimeout(initConstitutionRadarChart, 100);
            }
        }

        // 添加页面加载动画
        window.addEventListener('load', function() {
            const loader = document.getElementById('loader');
            if (loader) {
                loader.classList.add('fade-out');
                setTimeout(() => {
                    loader.style.display = 'none';
                }, 500);
            }
            
            // 添加渐入动画
            const fadeElements = document.querySelectorAll('.fade-in');
            fadeElements.forEach(element => {
                element.classList.add('opacity-100');
                element.classList.remove('opacity-0');
            });
            
            // 初始化默认显示的图表
            setTimeout(() => {
                initHealthTrendChart();
                initConstitutionRadarChart();
            }, 100);
        });
        
        // 登录注册功能处理
        document.addEventListener('DOMContentLoaded', function() {
            // 获取登录注册按钮
            const loginBtn = document.getElementById('login-btn');
            const registerBtn = document.getElementById('register-btn');
            
            // 创建登录模态框
            const loginModal = document.createElement('div');
            loginModal.className = 'fixed inset-0 bg-black/50 z-50 hidden items-center justify-center';
            loginModal.id = 'login-modal';
            loginModal.innerHTML = `
                <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 overflow-hidden">
                    <div class="relative">
                        <div class="bg-primary p-6 text-white text-center">
                            <h3 class="text-xl font-bold">用户登录</h3>
                            <p class="text-sm opacity-90">欢迎使用中医体质评估平台</p>
                        </div>
                        <button id="close-login" class="absolute top-4 right-4 text-white/70 hover:text-white">
                            <i class="fa fa-times text-xl"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <form id="login-form" class="space-y-4">
                            <div>
                                <label for="login-username" class="block text-sm font-medium text-gray-700 mb-1">手机号/用户名</label>
                                <input type="text" id="login-username" name="username" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                    placeholder="请输入手机号或用户名" required>
                            </div>
                            <div>
                                <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                                <input type="password" id="login-password" name="password" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                    placeholder="请输入密码" required>
                            </div>
                            <div class="flex justify-between items-center">
                                <label class="flex items-center">
                                    <input type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
                                    <span class="ml-2 block text-sm text-gray-600">记住我</span>
                                </label>
                                <a href="#" class="text-sm text-primary hover:text-primary/80">忘记密码？</a>
                            </div>
                            <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-lg font-medium hover:bg-primary/90 transition-colors">
                                登录
                            </button>
                        </form>
                        <div class="mt-4 text-center">
                            <p class="text-sm text-gray-600">还没有账号？ <a href="#" id="switch-to-register" class="text-primary font-medium">立即注册</a></p>
                        </div>
                    </div>
                </div>
            `;
            document.body.appendChild(loginModal);

            // 创建注册模态框
            const registerModal = document.createElement('div');
            registerModal.className = 'fixed inset-0 bg-black/50 z-50 hidden items-center justify-center';
            registerModal.id = 'register-modal';
            registerModal.innerHTML = `
                <div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4 overflow-hidden">
                    <div class="relative">
                        <div class="bg-primary p-6 text-white text-center">
                            <h3 class="text-xl font-bold">用户注册</h3>
                            <p class="text-sm opacity-90">创建账号，开启中医健康之旅</p>
                        </div>
                        <button id="close-register" class="absolute top-4 right-4 text-white/70 hover:text-white">
                            <i class="fa fa-times text-xl"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <form id="register-form" class="space-y-4">
                            <div>
                                <label for="register-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                                <input type="tel" id="register-phone" name="phone" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                    placeholder="请输入手机号" required>
                            </div>
                            <div class="flex space-x-2">
                                <div class="flex-1">
                                    <label for="register-code" class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                                    <input type="text" id="register-code" name="code" 
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                        placeholder="请输入验证码" required>
                                </div>
                                <button type="button" id="send-code" class="whitespace-nowrap px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors h-11 mt-5">
                                    获取验证码
                                </button>
                            </div>
                            <div>
                                <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">设置密码</label>
                                <input type="password" id="register-password" name="password" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                    placeholder="请设置6-20位密码" required>
                            </div>
                            <div>
                                <label for="register-repassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                                <input type="password" id="register-repassword" name="repassword" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                                    placeholder="请再次输入密码" required>
                            </div>
                            <div class="flex items-start">
                                <input type="checkbox" id="agree-terms" name="agreeTerms" 
                                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded mt-1" required>
                                <label for="agree-terms" class="ml-2 block text-sm text-gray-600">
                                    我已阅读并同意 <a href="#" class="text-primary">用户协议</a> 和 <a href="#" class="text-primary">隐私政策</a>
                                </label>
                            </div>
                            <button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-lg font-medium hover:bg-primary/90 transition-colors">
                                注册
                            </button>
                        </form>
                        <div class="mt-4 text-center">
                            <p class="text-sm text-gray-600">已有账号？ <a href="#" id="switch-to-login" class="text-primary font-medium">立即登录</a></p>
                        </div>
                    </div>
                </div>
            `;
            document.body.appendChild(registerModal);

            // 模态框控制函数
            function showModal(modalId) {
                const modal = document.getElementById(modalId);
                if (modal) {
                    modal.classList.remove('hidden');
                    modal.classList.add('flex');
                    document.body.style.overflow = 'hidden';
                }
            }

            function hideModal(modalId) {
                const modal = document.getElementById(modalId);
                if (modal) {
                    modal.classList.add('hidden');
                    modal.classList.remove('flex');
                    document.body.style.overflow = 'auto';
                }
            }

            // 绑定按钮事件
            if (loginBtn) {
                loginBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    showModal('login-modal');
                });
            }

            if (registerBtn) {
                registerBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    showModal('register-modal');
                });
            }

            // 关闭按钮事件
            const closeLoginBtn = document.getElementById('close-login');
            const closeRegisterBtn = document.getElementById('close-register');

            if (closeLoginBtn) {
                closeLoginBtn.addEventListener('click', function() {
                    hideModal('login-modal');
                });
            }

            if (closeRegisterBtn) {
                closeRegisterBtn.addEventListener('click', function() {
                    hideModal('register-modal');
                });
            }

            // 切换登录注册
            const switchToRegister = document.getElementById('switch-to-register');
            const switchToLogin = document.getElementById('switch-to-login');

            if (switchToRegister) {
                switchToRegister.addEventListener('click', function(e) {
                    e.preventDefault();
                    hideModal('login-modal');
                    showModal('register-modal');
                });
            }

            if (switchToLogin) {
                switchToLogin.addEventListener('click', function(e) {
                    e.preventDefault();
                    hideModal('register-modal');
                    showModal('login-modal');
                });
            }

            // 点击模态框外部关闭
            document.addEventListener('click', function(event) {
                const loginModalElement = document.getElementById('login-modal');
                const registerModalElement = document.getElementById('register-modal');

                if (loginModalElement && event.target === loginModalElement) {
                    hideModal('login-modal');
                }
                if (registerModalElement && event.target === registerModalElement) {
                    hideModal('register-modal');
                }
            });

            // 验证码倒计时
            const sendCodeBtn = document.getElementById('send-code');
            if (sendCodeBtn) {
                sendCodeBtn.addEventListener('click', function() {
                    const phoneInput = document.getElementById('register-phone');
                    if (!phoneInput.value || !/^1[3-9]\d{9}$/.test(phoneInput.value)) {
                        alert('请输入有效的手机号');
                        return;
                    }

                    // 模拟发送验证码
                    alert('验证码已发送到 ' + phoneInput.value);
                    
                    // 倒计时
                    let countdown = 60;
                    sendCodeBtn.disabled = true;
                    sendCodeBtn.classList.add('bg-gray-300');
                    sendCodeBtn.classList.remove('bg-gray-100', 'hover:bg-gray-200');
                    sendCodeBtn.textContent = `${countdown}秒后重发`;

                    const timer = setInterval(() => {
                        countdown--;
                        sendCodeBtn.textContent = `${countdown}秒后重发`;
                        if (countdown <= 0) {
                            clearInterval(timer);
                            sendCodeBtn.disabled = false;
                            sendCodeBtn.classList.remove('bg-gray-300');
                            sendCodeBtn.classList.add('bg-gray-100', 'hover:bg-gray-200');
                            sendCodeBtn.textContent = '获取验证码';
                        }
                    }, 1000);
                });
            }

            // 表单提交处理
            const loginForm = document.getElementById('login-form');
            const registerForm = document.getElementById('register-form');

            if (loginForm) {
                loginForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    const username = document.getElementById('login-username').value;
                    const password = document.getElementById('login-password').value;
                    
                    // 在实际应用中，这里应该发送登录请求到服务器
                    console.log('登录信息:', { username, password });
                    alert('登录成功！欢迎回来');
                    hideModal('login-modal');
                });
            }

            if (registerForm) {
                registerForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    const phone = document.getElementById('register-phone').value;
                    const code = document.getElementById('register-code').value;
                    const password = document.getElementById('register-password').value;
                    const repassword = document.getElementById('register-repassword').value;
                    
                    // 简单验证
                    if (!/^1[3-9]\d{9}$/.test(phone)) {
                        alert('请输入有效的手机号');
                        return;
                    }
                    
                    if (password !== repassword) {
                        alert('两次输入的密码不一致');
                        return;
                    }
                    
                    if (password.length < 6 || password.length > 20) {
                        alert('密码长度应为6-20位');
                        return;
                    }
                    
                    // 在实际应用中，这里应该发送注册请求到服务器
                    console.log('注册信息:', { phone, code, password });
                    alert('注册成功！请登录');
                    hideModal('register-modal');
                    showModal('login-modal');
                });
            }
        });
        
        // 联系表单提交处理
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.getElementById('contact-form');
            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // 获取表单数据
                    const name = document.getElementById('contact-name').value;
                    const phone = document.getElementById('contact-phone').value;
                    const email = document.getElementById('contact-email').value;
                    const subject = document.getElementById('contact-subject').value;
                    const message = document.getElementById('contact-message').value;
                    
                    // 简单验证
                    if (!name) {
                        alert('请输入您的姓名');
                        return;
                    }
                    
                    if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                        alert('请输入有效的手机号');
                        return;
                    }
                    
                    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                        alert('请输入有效的邮箱地址');
                        return;
                    }
                    
                    if (!subject) {
                        alert('请选择咨询主题');
                        return;
                    }
                    
                    if (!message || message.length < 10) {
                        alert('请输入至少10个字的留言内容');
                        return;
                    }
                    
                    // 在实际应用中，这里应该发送数据到服务器
                    console.log('联系表单数据:', { name, phone, email, subject, message });
                    alert('感谢您的留言！我们会尽快与您联系。');
                    
                    // 重置表单
                    contactForm.reset();
                });
            }
        });
    </script>
    
    <!-- 联系我们 -->
    <section id="contact" class="py-20 px-4 md:px-8">
        <div class="container mx-auto max-w-7xl">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-neutral mb-4">联系我们</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    如果您对我们的中医体质评估平台有任何问题或建议，欢迎随时联系我们
                </p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div class="bg-white rounded-2xl shadow-elegant p-8">
                    <h3 class="text-2xl font-bold text-neutral mb-6">发送消息</h3>
                    <form id="contact-form" class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="contact-name" class="block text-gray-700 font-medium mb-2">姓名</label>
                                <input type="text" id="contact-name" name="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none" placeholder="请输入您的姓名">
                            </div>
                            <div>
                                <label for="contact-phone" class="block text-gray-700 font-medium mb-2">手机号</label>
                                <input type="tel" id="contact-phone" name="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none" placeholder="请输入您的手机号">
                            </div>
                        </div>
                        <div>
                            <label for="contact-email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                            <input type="email" id="contact-email" name="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none" placeholder="请输入您的邮箱">
                        </div>
                        <div>
                            <label for="contact-subject" class="block text-gray-700 font-medium mb-2">主题</label>
                            <select id="contact-subject" name="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none">
                                <option value="">请选择咨询主题</option>
                                <option value="product">产品咨询</option>
                                <option value="cooperation">商务合作</option>
                                <option value="support">技术支持</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        <div>
                            <label for="contact-message" class="block text-gray-700 font-medium mb-2">留言内容</label>
                            <textarea id="contact-message" name="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none resize-none" placeholder="请输入您的留言内容..."></textarea>
                        </div>
                        <div class="flex justify-end">
                            <button type="submit" class="px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors shadow-lg">
                                发送消息
                            </button>
                        </div>
                    </form>
                </div>
                
                <div>
                    <div class="bg-white rounded-2xl shadow-elegant p-8 mb-8">
                        <h3 class="text-2xl font-bold text-neutral mb-6">联系方式</h3>
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                    <i class="fa fa-map-marker text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-neutral mb-1">公司地址</h4>
                                    <p class="text-gray-600">北京市海淀区中关村软件园二期西扩二号楼</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                    <i class="fa fa-phone text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-neutral mb-1">联系电话</h4>
                                    <p class="text-gray-600">400-123-4567</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4">
                                    <i class="fa fa-envelope text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-neutral mb-1">邮箱地址</h4>
                                    <p class="text-gray-600">contact@tcm-assessment.com</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-2xl shadow-elegant p-8">
                        <h3 class="text-2xl font-bold text-neutral mb-6">关注我们</h3>
                        <div class="flex space-x-6">
                            <a href="#" class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-weixin text-xl"></i>
                            </a>
                            <a href="#" class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-weibo text-xl"></i>
                            </a>
                            <a href="#" class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-linkedin text-xl"></i>
                            </a>
                            <a href="#" class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
                                <i class="fa fa-youtube-play text-xl"></i>
                            </a>
                        </div>
                        
                        <div class="mt-8">
                            <h4 class="font-semibold text-neutral mb-4">扫描二维码关注公众号</h4>
                            <div class="flex justify-center">
                                <div class="w-40 h-40 bg-gray-100 rounded-lg flex items-center justify-center">
                                    <p class="text-sm text-gray-500">公众号二维码</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-12 px-4 md:px-8">
        <div class="container mx-auto max-w-7xl">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-6">关于我们</h3>
                    <p class="text-gray-300 mb-6">
                        我们致力于打造专业的中医体质评估平台，通过结合传统中医理论和现代AI技术，为用户提供个性化的健康评估和调理方案。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-300 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-white transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">服务项目</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">中医体质评估</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">个性化调理方案</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">健康数据监测</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">医师在线咨询</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">中医知识库</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">帮助中心</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">服务条款</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-white transition-colors">数据安全</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6">联系方式</h3>
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <i class="fa fa-map-marker mr-3 text-primary"></i>
                            <span class="text-gray-300">北京市海淀区中关村软件园二期</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-primary"></i>
                            <span class="text-gray-300">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-primary"></i>
                            <span class="text-gray-300">contact@tcm-assessment.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-clock-o mr-3 text-primary"></i>
                            <span class="text-gray-300">周一至周五 9:00-18:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 mb-4 md:mb-0">© 2023 中医体质评估平台 版权所有</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">服务条款</a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">网站地图</a>
                </div>
            </div>
        </div>
    </footer>
    </body>
</html>